<template>
  <div class="login-page">
    <div class="login-top">
      <img class="login-map" src="../../public/img/login-map.png" alt="" />
      <div class="login-box">
        <img
          class="login-box-img"
          src="../../public/img/login-box.png"
          alt=""
        />
        <div class="form-box">
          <div class="logo">
            <img src="../../public/img/login-logo.png" alt="" />
          </div>

          <el-form
            ref="loginForm"
            :model="loginForm"
            :rules="rules"
            style="height:74.4%"
          >
            <el-form-item prop="userName" class="login-input">
              <el-input v-model="loginForm.userName" placeholder="请输入手机号" @keyup.enter.native="loginBtn('loginForm')">
                <img
                  slot="prefix"
                  src="../../public/img/login-phone.png"
                  alt=""
                />
              </el-input>
            </el-form-item>

            <el-form-item prop="phoneCode" class="login-input login-key-item">
              <el-input
                v-model="loginForm.phoneCode"
                placeholder="请输入短信验证码"
              >
                <img
                  slot="prefix"
                  src="../../public/img/login-key.png"
                  alt=""
                />
              </el-input>

              <el-button
                class="login-key-item-btn"
                v-if="!showTimeFlag"
                @click="getLoginCode('loginForm')"
                type="primary"
              >
                获取验证码
              </el-button
              >
              <div v-else class="login-time">{{ time }}s</div>
            </el-form-item>

            <el-form-item class="login-input login-code-item" prop="zcode">
              <el-input v-model="loginForm.zcode" placeholder="请输入验证码">
                <img
                  slot="prefix"
                  src="../../public/img/login-code.png"
                  alt=""
                />
              </el-input>

              <div class="login-time" ref="zcode">
                <z-code :fresh="codeFlag" @makedCode="getMakedCode"></z-code>
              </div>
              <img
                @click="refreshCode()"
                class="login-refresh"
                src="../../public/img/login-refresh.png"
                alt=""
              />
            </el-form-item>

            <el-form-item
              class="login-input login-submit-btn"
              style="text-align:center"
            >
              <el-button type="primary" @click="loginBtn('loginForm')"
                >登录</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
    <div class="login-bottom">
      <img class="login-city" src="../../public/img/login-city.png" alt="" />
    </div>
    <div class="login-icp text-center text-white ">
      版权所有 @2019 南京红松信息技术有限公司<a
        class="m-l-xs m-r-xxs"
        href="http://beian.miit.gov.cn/"
        target="_blank"
        >苏ICP备14037634号</a
      >
    </div>
  </div>
</template>
<script>
import store from '../store/index'
import { mapState } from 'vuex'
import ZCode from '@/components/zcode.vue'

export default {
  components: {
    // 验证码组件
    ZCode
  },
  data() {
    const checkPhone = (rule, value, callback) => {
      let reg = /^1[345789]\d{9}$/
      if (!reg.test(value)) {
        callback(new Error('请输入11位手机号'))
      } else {
        callback()
      }
    }

    const validateZcode = (rule, value, callback) => {
      if (value !== this.zcodeStr) {
        callback(new Error('验证码错误!'))
      } else {
        callback()
      }
    }

    return {
      loginForm: {
        userName: '',
        zcode: '',
        phoneCode: ''
      },
      zcodeStr: '',
      codeFlag: true,
      rules: {
        userName: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          {
            type: 'number',
            validator: checkPhone,
            message: '请输入11位有效手机号',
            trigger: ['blur']
          }
        ],
        phoneCode: [
          { required: true, message: '请输入短信验证码', trigger: 'blur' }
        ],
        zcode: [
          { required: true, message: '请输入验证码', trigger: 'blur' },
          {
            validator: validateZcode,
            trigger: 'blur',
            message: '验证码错误！请重新输入'
          }
        ]
      },
      time: 60,
      timer: null,
      showTimeFlag: false,

    }
  },

  mounted() {
    this.refreshCode()
  },

  methods: {
    // 刷新前台验证码
    refreshCode() {
      this.codeFlag = !this.codeFlag
    },
    // 更新前台验证码
    getMakedCode(code) {
      this.zcodeStr = code
    },
    // 登录接口
    loginBtn(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.api
            .loginBySms({
              account: this.loginForm.userName,//手机号码
              phoneValidateCode: this.loginForm.phoneCode//验证码
            })
            .then(data => {
              console.log(data);
              if (data.code == 1) {
                store.commit('home/getAuthorization', data.data.token)
                store.commit('home/getStartDate', new Date().getTime() )
                store.commit('home/getuserInfoVo', data.data.userInfoVo)
                this.$router.push('/home')
              }
            })
        } else {
          return false
        }
      })
    },
    // 短信验证码接口
    getLoginCode(formName) {
      this.$refs[formName].validateField('userName', valid => {
        if (!valid) {
          // 表单验证通过
          this.api
            .getLoginCode({
              account: this.loginForm.userName
            })
            .then(res => {
              if (res.code == 1) {
                this.timeOut()
              }
            })
        }
      })
    },
    // 倒计时
    timeOut() {
      const timeCount = 60
      if (!this.timer) {
        this.time = timeCount
        this.showTimeFlag = true
        this.timer = setInterval(() => {
          if (this.time > 0 && this.time <= timeCount) {
            this.time--
          } else {
            this.showTimeFlag = false
            clearInterval(this.timer)
            this.timer = null
          }
        }, 1000)
      }
    }
  },

  computed: {
    ...mapState(['home'])
  }
}
</script>
<style lang="scss" scoped>
.login-page {
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, #1c457d, #00000a);
}
.login-light {
  width: 100%;
  height: 100%;
}
.login-top {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 90%;
  position: relative;
  z-index: 1;
}
.login-map {
  width: 50%;
}
.login-box {
  width: 24%;
  min-width: 400px;
  margin-right: 10%;
  display: inline;
  position: relative;
}
.login-box-img {
  width: 100%;
}
.login-bottom {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 618px;
  background: url('../../public/img/login-light.png') no-repeat center;
}
.login-bottom img {
  width: 100%;
  position: absolute;
  bottom: 0;
}
.login-icp {
  width: 100%;
  position: absolute;
  bottom: 0;
  color: #1c457d;
  background-color: rgba(255, 255, 255, 0.6);
}
.login-icp a {
  color: #1c457d;
}
.form-box {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
}
.logo {
  height: 25.6%;
}
.logo img {
  position: absolute;
  top: -40px;
  right: 0;
  left: 0;
  bottom: 0;
  margin: 0 auto;
}
.login-refresh {
  cursor: pointer;
}
</style>
